import { DeleteOutlined } from '@ant-design/icons';
import { i18n } from '@app-nextmesh/common/utils';
import { Button, Modal } from 'antd';
import { useEffect, useState } from 'react';

interface IProps {
  alert: string;
  loading?: boolean;
  primaryTitle?: string;
  secondaryTitle?: string;
  onPrimaryClick: () => void;
  onSecondaryClick?: () => void;
}
export default function AlertDialog({
  alert,
  loading,
  primaryTitle,
  secondaryTitle,
  onPrimaryClick,
  onSecondaryClick,
}: IProps) {
  const [isModalOpen, setIsModalOpen] = useState(false);
  useEffect(() => {
    setIsModalOpen(true);
  }, []);
  return (
    <Modal
      title={
        <div>
          <DeleteOutlined style={{ marginRight: 10, color: '#a7d2ff' }} />
          {alert}
        </div>
      }
      closable={false}
      open={isModalOpen}
      footer={[
        <Button
          key='back'
          onClick={onSecondaryClick}>
          {secondaryTitle ?? i18n.t('cancel')}
        </Button>,
        <Button
          key='submit'
          type='primary'
          onClick={onPrimaryClick}
          loading={loading ?? false}
          style={{ backgroundColor: '#464681', color: '#fff' }}>
          {primaryTitle ?? i18n.t('sure')}
        </Button>,
      ]}></Modal>
  );
}
